<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<jsp:include page="../pageheader.jsp"/>

<div class="container">
    <div id="historicDiv" class="panel panel-info">
        <div class="panel-heading">
            Cars
        </div>
        <div class="panel-body">
            <table id="table_cars" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Brand</th>
                        <th>Seats</th>
                        <th>Year</th>
                        <th>Plate number</th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>

                <tbody>
                </tbody>
            </table>
        </div>
        <div class="panel-footer">
            <button id="moreButton" type="button" onclick="moreButtonClick()" class="btn btn-primary"><i class="fa fa-plus"></i></button>

            <div id="divAddNewCar" class="panel panel-info">
                <div class="panel-heading">
                    Add new car
                </div>
                <div class="panel-body">
                    <form id="formAddNewCar" class="form-horizontal">
                        <div class="form-group">
                            <label for="numberSeatsField" class="col-xs-12 col-sm-2">Seats</label>
                            <div class="col-xs-12 col-sm-10">
                                <input type="number" class="form-control" minlength="1" maxlength="2" name="seats" id="numberSeatsField" placeholder="Number of car seats" data-error="Number of seats must have 1-2 numbers!"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="plateNumberField" class="col-xs-12 col-sm-2">Plate Number</label>
                            <div class="col-xs-12 col-sm-10">
                                <input type="text" class="form-control" minlength="1" maxlength="10" name="plate_number" id="plateNumberField" placeholder="Car plate number" data-error="Plate number must have 1-10 characters!"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="brandField" class="col-xs-12 col-sm-2">Brand</label>
                            <div class="col-xs-12 col-sm-10">
                                <input type="text" class="form-control" minlength="1" maxlength="70" name="brand" id="brandField" placeholder="Car brand" data-error="Brand must have 1-70 characters!"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="yearField" class="col-xs-12 col-sm-2">Year</label>
                            <div class="col-xs-12 col-sm-10">
                                <input type="number" class="form-control" minlength="4" maxlength="4" name="year" id="yearField" placeholder="Year of car production" data-error="Year must have 4 numbers!"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-12">
                                <button type="button" onclick="addNewCarClick()" class="btn btn-primary">Add new car</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var user_id = ${user_id};
</script>

<jsp:include page="../pagefooter.jsp"/>
